<template>
<!-- Farms -->
  <div class="tp-body">
    <div class="JGame-Official-Channel">
      <div class="title">
        <h3>JGame Farms 2.0</h3>
        <p>Stake LP Token to earn</p>
      </div>
      <!-- bannar -->
      <CRow>
        <CCol class="bannar-body" :sm="12" :lg="12">
          <div class="body-title">
            <h3>$5,890,445</h3>
            <p>Total values in Farm Pool</p>
          </div>
          <div class="body-title">
            <h3>$2,190,565</h3>
            <p>Total LP Locked</p>
          </div>
          <div class="img-body">
            <img class="img" :src="farmsBanner" alt="">
          </div>
        </CCol>
      </CRow>
      <CRow>
          <CCol v-for="item in groupItems" key="item"  :sm="12" :lg="6">
            <div class="group-item">
              <div class="item-title">
                  <strong>5,890,445</strong>
                  <p>Remaining tokens in pool(SMON) ~ $2,708</p>
              </div>
              <div class="item-card">
                <div class="item-card-img-body">
                  <img class="img" :src="cardImg" alt="">
                </div>
                <div class="item-card-color">
                  <div class="item-title">
                    <strong>85.41%</strong>
                    <p>APR</p> 
                  </div>
                  <div class="item-title">
                    <strong>85.41%</strong>
                    <p>Eam</p> 
                  </div>
                </div>
              </div>
            </div>
          </CCol>
      </CRow>
    </div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { brandSet } from '@coreui/icons'
import  farmsBanner  from '@/assets/images/farms/Farms_banner.png'
import  cardImg  from '@/assets/images/farms/card-img.png'
export default {
  name: 'Dashboard',
  components: {
  },
  setup() {
    const groupItems =[];
    for (let i = 0; i < 9; i++) {
      groupItems.push({
        name:'Group Item'
      })
      
    }
    const icons = brandSet;
    const i18n = useI18n();
    return {
        i18n,
        icons,
        farmsBanner,
        groupItems,
        cardImg
    }
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";

.JGame-Official-Channel {
  text-align: center;
  .title {
    text-align: left;
    h3 {
      color: #6496e6;
    }
  }
  .bannar-body {
    display: flex;
    border-radius: 1rem;
    padding: 1rem;
    padding-bottom: 0;
    color: #fff;
    background-image: $info-btn;
    -webkit-box-shadow: $boxShadow;
    box-shadow: $boxShadow;
    font-size: 1rem;
    margin: 0.2rem;
    .body-title {
      font-size: 0.7rem;
      h3 {
        font-size: 1rem;
      }
      width: 50%;
    }
    .img-body {
      margin-top: -2.6rem;
      width: 50%;
      overflow: hidden;
      img {
        width: 10rem;
      }
    }
    @media (min-width: 676px) {
      .body-title {
        font-size: 1rem;
        h3 {
          font-size: 1.5rem;
        }
        margin: auto;
        width: 50%;
      }
      .img-body {
        margin-top: -7rem;
        img {
          width: 20rem;
        }
      }
    }
  }
  .group-item {
    background: #fff;
    -webkit-box-shadow: $boxShadow;
    box-shadow: $boxShadow;
    border-radius: 1rem;
    margin-top: 5%;
    padding: 1rem;
    .item-title {
      border-bottom: 1px solid #eee;
      strong {
        font-size: 1.5rem;
        color: #6496e6;
      }
    }
    .item-card {
      padding: 1rem 0;
      .item-card-img-body {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .item-card-color {
        display: flex;
        border-radius: 1rem;
        padding: 1rem;
        padding-bottom: 0;
        color: #333;
        margin: auto;
        margin-top: 1rem;
        background: #edf7ff;
        .item-title {
          width: 50%;
          strong {
            color: #6496e6;
          }
        }
      }
    }
  }
}
</style>
